<template>
  <div class="app-container">
    <!-- 时间范围选择 -->
    <el-card class="mb20">
      <div slot="header" class="clearfix">
        <span>统计时间范围</span>
      </div>
      <el-form :model="queryParams" size="small" :inline="true">
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="queryParams.deviceName"
            placeholder="请输入设备名称"
            clearable
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="场所名称">
          <el-input
            v-model="queryParams.locationName"
            placeholder="请输入场所名称"
            clearable
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询统计</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="success" icon="el-icon-download" @click="handleExport">导出报表</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 统计概览卡片 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-content">
            <div class="overview-icon" style="background: linear-gradient(45deg, #409EFF, #66B1FF);">
              <i class="el-icon-monitor" />
            </div>
            <div class="overview-info">
              <div class="overview-title">总连接次数</div>
              <div class="overview-value">{{ statistics.totalConnections }}</div>
              <div class="overview-change">
                <span class="change-text">较昨日</span>
                <span :class="['change-value', statistics.connectionChange >= 0 ? 'positive' : 'negative']">
                  {{ statistics.connectionChange >= 0 ? '+' : '' }}{{ statistics.connectionChange }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-content">
            <div class="overview-icon" style="background: linear-gradient(45deg, #67C23A, #85CE61);">
              <i class="el-icon-user" />
            </div>
            <div class="overview-info">
              <div class="overview-title">活跃用户数</div>
              <div class="overview-value">{{ statistics.activeUsers }}</div>
              <div class="overview-change">
                <span class="change-text">较昨日</span>
                <span :class="['change-value', statistics.userChange >= 0 ? 'positive' : 'negative']">
                  {{ statistics.userChange >= 0 ? '+' : '' }}{{ statistics.userChange }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-content">
            <div class="overview-icon" style="background: linear-gradient(45deg, #E6A23C, #EEBE77);">
              <i class="el-icon-time" />
            </div>
            <div class="overview-info">
              <div class="overview-title">平均使用时长</div>
              <div class="overview-value">{{ statistics.avgDuration }}</div>
              <div class="overview-change">
                <span class="change-text">分钟</span>
                <span :class="['change-value', statistics.durationChange >= 0 ? 'positive' : 'negative']">
                  {{ statistics.durationChange >= 0 ? '+' : '' }}{{ statistics.durationChange }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card">
          <div class="overview-content">
            <div class="overview-icon" style="background: linear-gradient(45deg, #F56C6C, #F78989);">
              <i class="el-icon-pie-chart" />
            </div>
            <div class="overview-info">
              <div class="overview-title">成功率</div>
              <div class="overview-value">{{ statistics.successRate }}%</div>
              <div class="overview-change">
                <span class="change-text">较昨日</span>
                <span :class="['change-value', statistics.rateChange >= 0 ? 'positive' : 'negative']">
                  {{ statistics.rateChange >= 0 ? '+' : '' }}{{ statistics.rateChange }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="mb20">
      <!-- 连接趋势图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>连接趋势统计</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refreshChart('connection')">刷新</el-button>
          </div>
          <div id="connectionChart" style="height: 400px;" />
        </el-card>
      </el-col>
      <!-- 设备状态分布 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>设备状态分布</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refreshChart('status')">刷新</el-button>
          </div>
          <div id="statusChart" style="height: 400px;" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 地域分布和时段分析 -->
    <el-row :gutter="20" class="mb20">
      <!-- 地域分布图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>地域分布统计</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refreshChart('region')">刷新</el-button>
          </div>
          <div id="regionChart" style="height: 400px;" />
        </el-card>
      </el-col>
      <!-- 时段分析图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>时段分析统计</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refreshChart('hour')">刷新</el-button>
          </div>
          <div id="hourChart" style="height: 400px;" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细统计表格 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>设备详细统计</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="getDetailList">刷新</el-button>
      </div>

      <el-table v-loading="loading" :data="detailList" style="width: 100%">
        <el-table-column label="设备ID" align="center" prop="deviceId" min-width="120" />
        <el-table-column label="设备名称" align="center" prop="deviceName" min-width="100" />
        <el-table-column label="场所名称" align="center" prop="locationName" min-width="120" />
        <el-table-column label="连接次数" align="center" prop="connections" min-width="100">
          <template slot-scope="scope">
            <el-tag type="primary">{{ scope.row.connections }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="活跃用户" align="center" prop="activeUsers" min-width="100">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.activeUsers }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="平均时长(分钟)" align="center" prop="avgDuration" min-width="120">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.avgDuration }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="成功率" align="center" prop="successRate" min-width="100">
          <template slot-scope="scope">
            <el-progress
              :percentage="parseFloat(scope.row.successRate)"
              :color="getProgressColor(scope.row.successRate)"
              :show-text="true"
              :format="format => `${format}%`"
            />
          </template>
        </el-table-column>
        <el-table-column label="最后活跃时间" align="center" prop="lastActiveTime" min-width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.lastActiveTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleDetailView(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDetailList"
      />
    </el-card>

    <!-- 设备详情统计对话框 -->
    <el-dialog title="设备详细统计" :visible.sync="detailOpen" width="1000px" append-to-body>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="设备ID">{{ deviceDetailInfo.deviceId }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ deviceDetailInfo.deviceName }}</el-descriptions-item>
            <el-descriptions-item label="场所名称">{{ deviceDetailInfo.locationName }}</el-descriptions-item>
            <el-descriptions-item label="场所地址">{{ deviceDetailInfo.locationAddress }}</el-descriptions-item>
            <el-descriptions-item label="总连接次数">{{ deviceDetailInfo.totalConnections }}</el-descriptions-item>
            <el-descriptions-item label="成功连接数">{{ deviceDetailInfo.successConnections }}</el-descriptions-item>
            <el-descriptions-item label="失败连接数">{{ deviceDetailInfo.failedConnections }}</el-descriptions-item>
            <el-descriptions-item label="成功率">{{ deviceDetailInfo.successRate }}%</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="趋势图表" name="chart">
          <div id="deviceDetailChart" style="height: 400px;" />
        </el-tab-pane>
        <el-tab-pane label="用户分析" name="user">
          <el-table :data="deviceDetailInfo.userStats" style="width: 100%">
            <el-table-column label="用户OpenID" prop="openId" min-width="200" />
            <el-table-column label="连接次数" prop="connections" min-width="100" />
            <el-table-column label="总时长(分钟)" prop="totalDuration" min-width="120" />
            <el-table-column label="最后连接时间" prop="lastConnection" min-width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.lastConnection, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOverviewStatistics,
  getDeviceStatistics,
  getConnectionChart,
  getStatusChart,
  getRegionChart,
  getHourChart,
  getDeviceDetail,
  exportStatistics
} from '@/api/wifi/statistics'

export default {
  name: 'DeviceStatistics',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 时间范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceName: null,
        locationName: null,
        startDate: null,
        endDate: null
      },
      // 统计数据
      statistics: {
        totalConnections: 0,
        activeUsers: 0,
        avgDuration: 0,
        successRate: 0,
        connectionChange: 0,
        userChange: 0,
        durationChange: 0,
        rateChange: 0
      },
      // 详细列表
      detailList: [],
      total: 0,
      // 对话框
      detailOpen: false,
      activeTab: 'basic',
      deviceDetailInfo: {},
      // 图表实例
      charts: {}
    }
  },
  created() {
    this.initDateRange()
    this.getStatistics()
    this.getDetailList()
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  beforeDestroy() {
    // 销毁图表实例
    Object.keys(this.charts).forEach(key => {
      if (this.charts[key]) {
        this.charts[key].dispose()
      }
    })
  },
  methods: {
    /** 初始化日期范围 */
    initDateRange() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) // 默认最近7天
      this.dateRange = [this.formatDate(start), this.formatDate(end)]
      this.queryParams.startDate = this.dateRange[0]
      this.queryParams.endDate = this.dateRange[1]
    },
    /** 格式化日期 */
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    /** 日期范围变化 */
    handleDateChange(dateRange) {
      if (dateRange && dateRange.length === 2) {
        this.queryParams.startDate = dateRange[0]
        this.queryParams.endDate = dateRange[1]
      } else {
        this.queryParams.startDate = null
        this.queryParams.endDate = null
      }
    },
    /** 查询统计 */
    handleQuery() {
      this.getStatistics()
      this.getDetailList()
      this.refreshAllCharts()
    },
    /** 重置查询 */
    resetQuery() {
      this.initDateRange()
      this.queryParams.deviceName = null
      this.queryParams.locationName = null
      this.handleQuery()
    },
    /** 获取统计数据 */
    getStatistics() {
      const params = {
        startDate: this.queryParams.startDate,
        endDate: this.queryParams.endDate,
        deviceName: this.queryParams.deviceName,
        locationName: this.queryParams.locationName
      }
      getOverviewStatistics(params).then(response => {
        this.statistics = response.data
      }).catch(() => {
        // 如果接口调用失败，使用默认数据
        this.statistics = {
          totalConnections: 0,
          activeUsers: 0,
          avgDuration: 0,
          successRate: 0,
          connectionChange: 0,
          userChange: 0,
          durationChange: 0,
          rateChange: 0
        }
      })
    },
    /** 获取详细列表 */
    getDetailList() {
      this.loading = true
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        startDate: this.queryParams.startDate,
        endDate: this.queryParams.endDate,
        deviceName: this.queryParams.deviceName,
        locationName: this.queryParams.locationName
      }
      getDeviceStatistics(params).then(response => {
        this.detailList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.detailList = []
        this.total = 0
        this.loading = false
      })
    },
    /** 导出报表 */
    handleExport() {
      const params = {
        startDate: this.queryParams.startDate,
        endDate: this.queryParams.endDate,
        deviceName: this.queryParams.deviceName,
        locationName: this.queryParams.locationName
      }
      exportStatistics(params).then(response => {
        this.download(response, `device_statistics_${new Date().getTime()}.xlsx`)
      })
    },
    /** 查看设备详情 */
    handleDetailView(row) {
      const params = {
        startDate: this.queryParams.startDate,
        endDate: this.queryParams.endDate
      }
      getDeviceDetail(row.deviceId, params).then(response => {
        this.deviceDetailInfo = response.data
        this.detailOpen = true
        this.$nextTick(() => {
          this.initDeviceDetailChart()
        })
      }).catch(() => {
        this.deviceDetailInfo = {
          ...row,
          totalConnections: row.connections,
          successConnections: Math.floor(row.connections * parseFloat(row.successRate) / 100),
          failedConnections: row.connections - Math.floor(row.connections * parseFloat(row.successRate) / 100),
          userStats: []
        }
        this.detailOpen = true
        this.$nextTick(() => {
          this.initDeviceDetailChart()
        })
      })
    },
    /** 获取进度条颜色 */
    getProgressColor(rate) {
      const value = parseFloat(rate)
      if (value >= 95) return '#67C23A'
      if (value >= 90) return '#E6A23C'
      return '#F56C6C'
    },
    /** 初始化图表 */
    initCharts() {
      this.initConnectionChart()
      this.initStatusChart()
      this.initRegionChart()
      this.initHourChart()
    },
    /** 刷新所有图表数据 */
    refreshChartData() {
      this.initConnectionChart()
      this.initStatusChart()
      this.initRegionChart()
      this.initHourChart()
    },
    /** 初始化连接趋势图 */
    initConnectionChart() {
      const chartDom = document.getElementById('connectionChart')
      if (chartDom && window.echarts) {
        this.charts.connection = window.echarts.init(chartDom)

        // 从API获取数据
        const params = {
          startDate: this.queryParams.startDate,
          endDate: this.queryParams.endDate
        }
        getConnectionChart(params).then(response => {
          const data = response.data
          const option = {
            title: {
              text: '连接趋势',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总连接数', '成功连接', '失败连接'],
              top: 30
            },
            xAxis: {
              type: 'category',
              data: data.categories || []
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总连接数',
                type: 'line',
                data: data.totalConnections || [],
                smooth: true,
                itemStyle: { color: '#409EFF' }
              },
              {
                name: '成功连接',
                type: 'line',
                data: data.successConnections || [],
                smooth: true,
                itemStyle: { color: '#67C23A' }
              },
              {
                name: '失败连接',
                type: 'line',
                data: data.failedConnections || [],
                smooth: true,
                itemStyle: { color: '#F56C6C' }
              }
            ]
          }
          this.charts.connection.setOption(option)
        }).catch(() => {
          // 如果API调用失败，使用默认数据
          const option = {
            title: {
              text: '连接趋势',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总连接数', '成功连接', '失败连接'],
              top: 30
            },
            xAxis: {
              type: 'category',
              data: []
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总连接数',
                type: 'line',
                data: [],
                smooth: true,
                itemStyle: { color: '#409EFF' }
              },
              {
                name: '成功连接',
                type: 'line',
                data: [],
                smooth: true,
                itemStyle: { color: '#67C23A' }
              },
              {
                name: '失败连接',
                type: 'line',
                data: [],
                smooth: true,
                itemStyle: { color: '#F56C6C' }
              }
            ]
          }
          this.charts.connection.setOption(option)
        })
      }
    },
    /** 初始化状态分布图 */
    initStatusChart() {
      const chartDom = document.getElementById('statusChart')
      if (chartDom && window.echarts) {
        this.charts.status = window.echarts.init(chartDom)

        getStatusChart().then(response => {
          const data = response.data.data || []
          const option = {
            title: {
              text: '设备状态分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              top: 50
            },
            series: [
              {
                name: '设备状态',
                type: 'pie',
                radius: '70%',
                data: data.map(item => ({
                  value: item.value,
                  name: item.name,
                  itemStyle: {
                    color: item.name === '在线' ? '#67C23A'
                      : item.name === '离线' ? '#F56C6C' : '#E6A23C'
                  }
                })),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          this.charts.status.setOption(option)
        }).catch(() => {
          // 使用默认数据
          const option = {
            title: {
              text: '设备状态分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              top: 50
            },
            series: [
              {
                name: '设备状态',
                type: 'pie',
                radius: '70%',
                data: [],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          this.charts.status.setOption(option)
        })
      }
    },
    /** 初始化地域分布图 */
    initRegionChart() {
      const chartDom = document.getElementById('regionChart')
      if (chartDom && window.echarts) {
        this.charts.region = window.echarts.init(chartDom)

        const params = {
          startDate: this.queryParams.startDate,
          endDate: this.queryParams.endDate
        }
        getRegionChart(params).then(response => {
          const data = response.data
          const option = {
            title: {
              text: '地域分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: data.regions || []
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '连接数',
                type: 'bar',
                data: data.connections || [],
                itemStyle: {
                  color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                  ])
                }
              }
            ]
          }
          this.charts.region.setOption(option)
        }).catch(() => {
          const option = {
            title: {
              text: '地域分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: []
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '连接数',
                type: 'bar',
                data: [],
                itemStyle: {
                  color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                  ])
                }
              }
            ]
          }
          this.charts.region.setOption(option)
        })
      }
    },
    /** 初始化时段分析图 */
    initHourChart() {
      const chartDom = document.getElementById('hourChart')
      if (chartDom && window.echarts) {
        this.charts.hour = window.echarts.init(chartDom)

        const params = {
          startDate: this.queryParams.startDate,
          endDate: this.queryParams.endDate
        }
        getHourChart(params).then(response => {
          const data = response.data
          const option = {
            title: {
              text: '时段分析',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: data.hours || []
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '连接数',
                type: 'area',
                data: data.connections || [],
                smooth: true,
                areaStyle: {
                  color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(103, 194, 58, 0.6)' },
                    { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
                  ])
                },
                itemStyle: { color: '#67C23A' }
              }
            ]
          }
          this.charts.hour.setOption(option)
        }).catch(() => {
          const option = {
            title: {
              text: '时段分析',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: []
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '连接数',
                type: 'area',
                data: [],
                smooth: true,
                areaStyle: {
                  color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(103, 194, 58, 0.6)' },
                    { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
                  ])
                },
                itemStyle: { color: '#67C23A' }
              }
            ]
          }
          this.charts.hour.setOption(option)
        })
      }
    },
    /** 初始化设备详情图表 */
    initDeviceDetailChart() {
      const chartDom = document.getElementById('deviceDetailChart')
      if (chartDom && window.echarts) {
        const chart = window.echarts.init(chartDom)
        const option = {
          title: {
            text: '设备连接趋势',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '连接数',
              type: 'line',
              data: [45, 30, 120, 180, 150, 200, 165],
              smooth: true,
              itemStyle: { color: '#409EFF' }
            }
          ]
        }
        chart.setOption(option)
      }
    },
    /** 刷新图表 */
    refreshChart(type) {
      if (this.charts[type]) {
        this.charts[type].resize()
      }
    },
    /** 刷新所有图表 */
    refreshAllCharts() {
      Object.keys(this.charts).forEach(key => {
        if (this.charts[key]) {
          this.charts[key].resize()
        }
      })
    }
  }
}
</script>

<style scoped>
.mb20 {
  margin-bottom: 20px;
}

.overview-card {
  height: 120px;
}

.overview-content {
  display: flex;
  align-items: center;
  height: 88px;
}

.overview-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.overview-icon i {
  font-size: 28px;
  color: white;
}

.overview-info {
  flex: 1;
}

.overview-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.overview-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.overview-change {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.change-text {
  color: #909399;
  margin-right: 4px;
}

.change-value.positive {
  color: #67C23A;
}

.change-value.negative {
  color: #F56C6C;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>
